<template>
	<view class="gy-state-bar" :id="id" :style="{gridTemplateColumns: `repeat(${ props.list.length }, 1fr)`}">
	    <view
	        class="gy-state-bar-item"
	        :class="{active: props.current === index}"
	        v-for="(item,index) in props.list"
	        :key="index"
			:style="{
				width: !props.scroll ? `calc(100% / ${props.list.length})` : 'auto'
			}"
	        @click.stop="selectFn(index)">
	        {{ item.label }}
	    </view>
	    <view class="gy-state-bar-indicator" :style="{
			width: indicatorWidth,
			transform: `translateX(${ indicatorPosition })`
		}"></view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		watch,
		onMounted,
		getCurrentInstance
	} from "vue";
	
	import {
		
	} from '@dcloudio/uni-app';
	
	const emits = defineEmits(["change", "action"]);
	
	const props = defineProps({
	    current: {
	    	type: Number,
	    	default: 0
	    },
	    list: {
	    	type: Array as () => Array<any>,
	    	default: () => []
	    },
	    scroll: {
	    	type: Boolean,
	    	default: true
	    },
	    action: {
	    	type: Boolean,
	    	default: false
	    }
	});
	
	const { proxy } = getCurrentInstance();
	const id = ref("gy-state-bar-" + getUid());
	
	const positionList: any = ref([]);
	const widthList: any = ref([]);
	const indicatorWidth = ref("68px");
	const indicatorPosition = ref("0");
	
	function getUid() {
	    function S4() {
	       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
	    }
	    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
	}
	
	function selectFn(index: number){
		emits("change", index);
	}
	
	watch(() => props.current, (newValue: any, oldValue: number) => {
		resetIndicatorFn();
	}, { immediate: true });
	
	function resetIndicatorFn(){
		indicatorWidth.value = widthList.value[props.current] + "px";
		if(!props.scroll){
			indicatorPosition.value = positionList.value[props.current] - positionList.value[0] + "px";
		}else{
			indicatorPosition.value = positionList.value[props.current] - positionList.value[0] + "px";
		}
	}
	
	onMounted(() => {
		
	    setTimeout(async () => {
			// #ifdef H5
			uni.createSelectorQuery().select(`#${ id.value }`).boundingClientRect((parent: any)=>{
				uni.createSelectorQuery().selectAll(".gy-state-bar-item").boundingClientRect((childs: any)=>{
					childs.forEach((item: any) => {
						positionList.value.push(item.left - parent.left);
						widthList.value.push(item.width);
					})
					resetIndicatorFn();
				}).exec();
			}).exec();
			// #endif
			
			// #ifdef MP-WEIXIN
			proxy.createSelectorQuery().select(`#${ id.value }`).boundingClientRect((parent: any)=>{
				proxy.createSelectorQuery().selectAll(".gy-state-bar-item").boundingClientRect((childs: any)=>{
					childs.forEach((item: any) => {
						positionList.value.push(item.left - parent.left);
						widthList.value.push(item.width);
					})
					resetIndicatorFn();
				}).exec();
			}).exec();
			// #endif
	    }, 100);
	})
	
</script>

<style lang="scss" scoped>
	.gy-state-bar{
	    position: relative;
	    width: 100%;
		height: 100rpx;
	    background-color: #fff;
	    font-size: 30rpx;
	    padding: 0 var(--gy-gap);
		white-space: nowrap;
		overflow: auto;
	    .gy-state-bar-item{
			position: relative;
	        height: 100rpx;
	        z-index: 1;
	        @include flex-center-center;
			display: inline-flex;
	        color: var(--gy-text-color-secondary);
			padding: 0 var(--gy-gap);
	    }
	    .gy-state-bar-indicator{
	    	position: absolute;
	        height: 60rpx;
	    	top: 20rpx;
	        z-index: 0;
	        background: var(--gy-color-primary);
	    	transition: 0.2s;
	        border-radius: 30rpx;
	    }
	    .gy-state-bar-item.active{
	        color: #ffffff;
	    }
	}
</style>